<template>
	<view class="nav_outer">
		<view>
			<view class="visit_card" v-for="(item, index) in dataList" :key="index">
				<view
					><view
						>就诊卡号：<text>{{ item.cardID }}</text></view
					>
					<view
						>可用余额：<text>{{ item.balance }}</text></view
					>
					<view
						>上次就诊：<text style="color: #cccccc">{{
							item.jiuzhen
						}}</text></view
					></view
				>
				<!-- </view>
			<view> -->
				<u-radio-group :size="50" v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" :name="item.cardID"> </u-radio>
				</u-radio-group>
			</view>
			<u-toast ref="uToast" />
		</view>
		<view class="safe"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			type: 'success',
			dataList: [
				{ cardID: '00466644824', balance: '0', jiuzhen: '暂无' },
				{ cardID: '111111', balance: '0', jiuzhen: '暂无' },
				{ cardID: '123123123', balance: '1', jiuzhen: '测试' },
			],
			value: '00466644824',
		}
	},
	methods: {
		showToast() {
			this.$refs.uToast.show({
				title: '设置成功',
				type: this.type,
			})
		},
		radioChange(e) {
			console.log(e, '321')
		},
		radioGroupChange(e) {
			this.showToast()
			console.log(e, '123')
		},
	},
}
</script>

<style lang="scss">
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.visit_card {
	display: flex;
	padding: 15rpx 30rpx;
	border-bottom: 1px solid #ccc;
	view:nth-child(1) {
		flex: 1;
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>